/* 3中间分类模块 */
/* 宽度不用指定了，因为W作为版心以已经确定了 */
.grid{
  height: 480px;
  /* background: red; */
}
/* 第一列：家用电器导航栏区域 */
.grid1{
  width: 190px;
  height: 100%;
  background: #6e6568;
  /* 这两个属性只能给到里面的斜杠/，给不到字 */
  color: #ffffff;
  font-size: 14px;
  position: relative;
}
/* 这里最初也是没管这个图片，最后用绝对定位把图片放到这里的 */
.grid1 .ad{
  position: absolute;
  top: 0px;
  left: -250px;
  width: 250px;
  height: 480px;
  background: rgb(107, 83, 87);
}
.grid1 .ad:hover .ad-r{
  /* 鼠标一经过大盒子，右边的盒子宽度就显示了 */
  width: 990px;
}
.grid1 .ad .ad-r {
  position: absolute;
  top: 0px;
  left: 250px;
  z-index: 999;
  width: 0px;
  height: 480px;
  background: url("../images/ad-r.jpg");
  /* 动画效果 */
  transition: all 0.8s;
}
.grid1 ul{
  padding: 10px 0px;
}
.grid1 li{
  line-height: 26px;
  height: 29px;
  /* 这里用padding是因为，当鼠标放上去的时候，有一个效果，不适合用margin */
  padding-left: 12px;
}
.grid1 li:hover{
  background: #9c9698;
}
/* 这个才能给到字体颜色和大小 */
.grid1 a{
  color: #ffffff;
  font-size: 14px;
  margin: 0 3px;
}
.grid1 a:hover{
  color: #f10215;
}

/* 第二列，轮播图等图区域 */
.grid2{
  height: 100%;
  width: 790px;
  /* background: pink; */
  margin-left: 20px;
}
.little-pic{
  margin-top: 10px;
}
.lunbo{
  position: relative;
}
.arrow-l,
.arrow-r{
  width: 30px;
  height: 60px;
  /* background: pink; */
	background: rgba(0, 0, 0, 0.3);
  /* 让两个小方块垂直方向上居中 */
	position: absolute;
  top: 50%;
	transform: translateY(-50%);
	text-align: center;
	line-height: 60px;
	font-size: 20px;
	color: rgba(255, 255, 255, .6);
	font-family: arial;
	font-weight: normal;
}
.arrow-l{
  left: 0;
}
.arrow-r{
  right: 0;
}
/* 轮播图的小圆圈 */
.circle{
  height: 20px;
  width: 167px;
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  border-radius: 10px;
  background:rgba(255, 255, 255, .3);
  /* 这里有了一个padding，但是circle宽度是固定的，所以要么宽度-10，要么boxsizing */
  padding-left: 8px;
}
.circle li{
  height: 12px;
  width: 12px;
  background: #ffffff;
  float: left;
  margin: 4px 4px;
  border-radius: 50%;
  cursor: pointer;
}
.circle li:hover{
  background: orange;
}
.circle .changeColor {
  background: orange;
}
/* 第三列，用户登录等模块 */
.grid3{
  width: 190px;
  height: 100%;
  /* background: royalblue; */
}
/* 登陆模块 */
.login{
  height: 115px;
  /* background: palegreen; */
  background: #ffffff;
  border-bottom: 1px solid #cccccc;
  /* 因为高度固定， */
  padding: 15px;
  box-sizing: border-box;
}
/* 顶部先是只固定文字区域大小，然后用绝对定位的方法将图片按在文字左边 */
.login-top{
  height: 60px;
  width: 95px;
  /* 只能针对“Hi，欢迎来到京东”字体 */
  font-size: 12px;
  color: #666666;
  line-height: 20px;
  /* 要想溢出的地方以省略号显示，并且所有文字只能一行显示（1,2,3） */
  white-space: nowrap; /*强制一行显示*/
  overflow: hidden;  /*溢出的部分隐藏*/
  text-overflow: ellipsis; /*超出的部分用省略号显示*/
  padding-left: 60px;
  position: relative;
}
/* 这里才是针对登录注册字体 */
.login-top a{
  color: #666666;
}
.login-top a:hover{
  color: #f10215;
}
/* 本来这是个a标签，不能给宽高，但是当给了绝对定位就可以了 */
.userimage{
  height: 50px;
  width: 50px;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../images/sprite_userinfo@1x.png") no-repeat -70px 0;
  /* 因为给外面的盒子一个圆角，单单一个圆圈不起作用，要overflow */
  /* border-radius: 50%;
  overflow: hidden; */
}
/* 图片大小太大，因此要对其设定大小，跟父类相同 */
.userimage img{
  width: 40px;
  height: 40px;
  margin: 5px ;
  /* width: 100%; */
  /* 但是这个属性单独给图片就可以生效 */
  border-radius: 50%;

}
.login-bottom{
  width: 155px;
  /* background:purple; */
}
.login-bottom a{
  display: inline-block;
  height: 20px;
  width: 70px;
  border: 2px solid #f10215;
  /* margin-right: 3px; */
  text-align: center;
  line-height: 20px;
  color: #f10215;
}
.login-bottom a:hover{
  background: #f10215;
  color: #ffffff;
}
/* 新闻模块 */
.news{
  height: 154px;
  /* background: palevioletred; */
  border-bottom: 1px solid #cccccc;
  padding: 7px 13px 0;
  box-sizing: border-box;
}
.news-top{
  height: 19px;
  border-bottom: 1px solid #cccccc;
  position: relative;
}
.news-top a{
  float: left;
  height: 17px;
  line-height: 17px;
}
.news-top .sale{
  width: 38px;
  border-right: 1px solid #cccccc;
}
.news-top .notice{
  margin-left: 15px;
}
.news-top .more{
  float: right;
}
.news-top div {
  height: 2px;
  width: 28px;
  background: #f10215;
  position: absolute;
  bottom: -1px;
}
.news-bottom ul {
  padding-top: 15px;
}
.news-bottom li{
  line-height: 23px;
  height: 23px;
}
.expand{
  /* background: purple; */
  height: 209px;
  overflow: hidden;

}
.expand ul{
  /* 父亲是190，但是li撑不开了，所以要放大宽度 */
  /* 但是一旦放了之后，会发现右边虽然第四个格子能上去了，但是右边溢出去了
  所以，在父组件那里还是要把多余的去掉 overflow: hidden;*/
  width: 195px;
}
.expand li{
  float: left;
  height: 69px;
  width: 47px;
  border-bottom: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
}
.expand  li a {
	display: block;
	padding-top: 15px;
  text-align: center;
}
.expand  li i {
	display: block;
	margin: 0 auto;
	margin-bottom: 10px;
	background: url("../images/sprite_fs@1x.png") no-repeat;
	width: 18px;
	height: 23px;
	background-position: -5px -88px;
}
.expand  li:first-child i {
	width: 18px;
	height: 23px;
	background-position: -5px -88px;
}